<template>
  <div class="content" >
      <div class="content-left">
        <el-divider style="margin-top: 60px"/>
        <div class="left-search-item">
          <el-text class="text">岗位分类</el-text>
          <el-tree :data="contentData.cData" empty-text="No Data" :props="{label:'title'}"  @node-click="onSelectClass" style="min-height: 220px;"></el-tree>
        </div>

        <div class="left-search-item">
          <el-text class="text">热门标签</el-text>
          <div style="margin-top: 20px">
            <el-tag @click="clickTag(item)" size="default" style="margin-right: 5px; margin-top: 5px;  cursor: pointer;" :class="{'tag-select':contentData.selectTagId===item.id}" v-for="item in contentData.tagData" :key="item.id">{{item.title}}</el-tag>
          </div>
        </div>
   </div>
    <div class="content-right" v-loading="contentData.loading">
      <div class="scrollable-parent"  style="min-width: 1200px; min-height: 500px; margin-right: 10px; margin-top: 0px">
        <el-tabs  :tab-position="'top'" style="height: 200px" @tab-click="handleTabClick" >
          <el-tab-pane :label="item" v-for="(item,index) in contentData.tabData" :key="index">
            <div class="flex-card-container scrollable-container" v-infinite-scroll="loadMore">
              <el-card class="card-view"  shadow="hover" v-for="item in contentData.pageData" @click="handleCardClick(item)">
                <div  style=" display: flex;
                      justify-content: space-between;
                      align-items: center;
                      padding: 2px;">
                  <span  style=" font-weight: bold;">{{item.title}}</span>
                  <span  style="
                  top: 8px;
                   right: 8px;
                   background-color: #f1c40f;
                   color: white;
                   padding: 2px 6px;
                   border-radius: 4px;">5k</span>
                </div>
                <div style="font-weight: bold; min-height: 50px; padding: 10px">
                  {{item.description}}
                </div>
                <div style="  display: flex; justify-content: space-between;  padding: 8px; border-top: 1px solid #ddd;">
                  <el-link type="danger"  @click.stop="handleCoverClick(item)">{{ item.cover }}</el-link>
                  <div>
                    <span v-if="item.location" style="margin-right:5px; color: rgb(69,69,72); background-color: #89E9D9; padding: 5px; border-radius: 10px" >{{ item.location }}</span>
                    <span style="color: rgb(69,69,72); background-color: #89E9D9; padding: 5px; border-radius: 10px">{{ item.education }}</span>
                  </div>
                </div>
              </el-card>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>


  </div>
</template>


<script setup>

import {onMounted, reactive, ref, watch} from "vue";
import {ElMessage} from "element-plus";
import {listApi as listClassificationList} from '@/api/classification'
import {listApi as listTagList} from '@/api/tag'
import {listApi as listThingList} from '@/api/thing'
import {BASE_URL} from "@/store/constants";
import {useRouter} from "vue-router";


const router = useRouter();

const contentData=reactive({
  selectX: 0,
  selectTagId: -1,
  cData: [],
  selectedKeys: [],
  tagData: [],
  loading: false,
  tabData: ['最新', '最热', '推荐'],
  selectTabIndex: 0,
  tabUnderLeft: 12,

  thingData: [],
  pageData: [],

  page: 1,
  total: 0,
  pageSize: 16,
})

onMounted(async () => {
  await initSider();
  await getThingList();
})

const props = defineProps({
  pageData: {
    type: Array,
    default: () => []
  }
});
watch(
    () => props.pageData,
    (newValue) => {
      contentData.loading=true;
      setTimeout(() => {
        contentData.loading = false;
      }, 1000);
      contentData.pageData = newValue;
    },
    { immediate: true }
);
const handleCoverClick = (item) => {
  ElMessage.success(item.cover)
}
const clickTag=(item)=>{
  lazyloading();
  if (contentData.selectTagId===item.id){
    contentData.selectTagId = -1;
  }else {
    contentData.selectTagId = item.id

  }
  console.log(item)
  contentData.selectedKeys = []
  contentData.page="1";
  getThingList({
    pageNum: contentData.page,
    pageSize: contentData.pageSize,
    tag: contentData.selectTagId===-1?undefined:contentData.selectTagId})
}
const onSelectClass = (node,ev) => {
  lazyloading();
  // 确保selectedKeys是一个数组，以便可以存放多个选中节点（如果需要多选功能的话）
  if (!Array.isArray(contentData.selectedKeys)) {
    contentData.selectedKeys = [];
  }

  // 清除现有选中项，如果需要保留多选历史，可注释掉这一行
  contentData.selectedKeys.splice(0, contentData.selectedKeys.length);

  // 将当前点击的节点的key值添加到selectedKeys数组中
  contentData.selectedKeys.push(node.key);
  if (contentData.selectedKeys.length > 0) {
    contentData.page="1";
    getThingList({      pageNum: contentData.page,
      pageSize: contentData.pageSize,classification: getSelectedKey()})
  }
  contentData.selectTagId = -1;
}
const initSider = () => {
  contentData.cData.push({key:'-1', title:'全部'})
  listClassificationList().then(res => {
    res.data.list.forEach(item=>{
      item.key = item.id
      contentData.cData.push(item)
    })
    console.log(contentData.cData)
  })
  listTagList().then(res => {
    contentData.tagData = res.data.list
  })
}
const lazyloading = (time) => {
  if (time===undefined){
    time=1000;
  }
  contentData.loading = true
  setTimeout(() => {
    contentData.loading = false;
  }, time);
}
const getThingList = (data) => {
  lazyloading(1000);
  if (data===undefined){
    data = {
      pageNum: contentData.page,
      pageSize: contentData.pageSize,
      tag: contentData.selectTagId===-1?undefined:contentData.selectTagId,
      classification: getSelectedKey()
    }
  }
  console.log(data)
  listThingList(data).then(res => {
    res.data.list.forEach((item, index) => {
      if (item.cover) {
        // item.cover = BASE_URL + '/api/staticfiles/image/' +  item.cover
      }
      if (item.location===null||item.location===''){
        // item.location="面聊";
      }
      if (item.description===null||item.description===''){
        item.description="点进来看看吧";
      }
    })
    contentData.thingData = res.data.list
    contentData.total = res.data.total
    console.log(contentData.thingData)
    contentData.pageData = contentData.thingData
  }).catch(err => {
    console.log(err)
  })
}
const handleCardClick=(item)=>{
  ElMessage.info(item.title);
}
const handleTabClick = (tab, event) => {
  // 获取被点击的标签索引
  const clickedTabIndex = contentData.tabData.findIndex(item => item === tab.props.label);
  contentData.selectTabIndex = clickedTabIndex;
  ElMessage.info(`Clicked Tab Index: ${clickedTabIndex}`);
  let sort = (clickedTabIndex === 0 ? 'recent' : clickedTabIndex === 1 ? 'hot' : 'recommend')
  ElMessage.info(sort);
  const data ={sort:sort};
  if (contentData.selectTagId!==-1){
    data['tag']=contentData.selectTagId;
  }else {
    data['classification']=getSelectedKey();
  }

  console.log(data);
  getThingList(data);
};
const getSelectedKey = () => {
  if (contentData.selectedKeys.length > 0) {
    return contentData.selectedKeys[0]
  } else {
    return -1
  }
}
const loading = ref(false)
const loadMore = async () => {
  loading.value = true
  setTimeout(() => {

    loading.value = false
  }, 2000)
  // 防止在数据已全部加载完毕后继续触发加载更多
  if (contentData.page * contentData.pageSize >= contentData.total) {
    ElMessage.warning('已无更多数据');
    return;
  }

  try {
    // 请求下一页数据
    contentData.page++;
    const newData = await listThingList({
      pageNum: contentData.page,
      pageSize: contentData.pageSize,
      tag: contentData.selectTagId === -1 ? undefined : contentData.selectTagId,
      classification: getSelectedKey()
    });

    // 检查是否有新数据返回，然后追加到现有数据中
    if (newData.data.list && newData.data.list.length > 0) {
      contentData.thingData = [...contentData.thingData, ...newData.data.list];
      contentData.pageData = contentData.thingData; // 更新显示的数据
    } else {
      // 如果返回数据为空，说明已无更多数据
      ElMessage.warning('已无更多数据');
    }
  } catch (err) {
    console.error('加载更多数据时出错:', err);
    ElMessage.error('加载失败，请稍后再试');
  }
};
</script>
<style scoped>
.card-view{

  width: calc(25% - 20px); /* 25% 占据四分之一，减去左右margin */
  margin: 10px 10px 0; /* 上下外边距10px，左右外边距10px，底部外边距为0以避免最后一行间距问题 */
  height: 150px; /* 根据内容调整高度 */
  cursor: pointer;

}

.flex-card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  overflow-y: auto;
  min-height: 650px;

}
.scrollable-parent {
  display: flex;
  flex-direction: column; /* 保持垂直布局 */
}
.scrollable-container {
  display: flex;
  flex-wrap: wrap;
  max-height: 300px; /* 调整此值以适应你的设计需求 */
  align-content: flex-start;
  justify-content: flex-start;
}
.content {
  display: flex;
  flex-direction: row;
  width: 1100px;
  margin: 20px 150px auto;
  min-height: 700px;
}
.flex-view {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
//justify-content: space-between;
  display: flex;
}
.content-left {
  width: 220px;
  margin-right: 32px;
  min-width: 200px;
}
.left-search-item {
  overflow: hidden;
  border-bottom: 1px solid #cedce4;
  margin-top: 24px;
  padding-bottom: 24px;
}
.text {
  color: #4d4d4d;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  height: 24px;
}
/* 如果没有添加类名，而是直接定位，请相应调整选择器 */
.content-right > div:first-child {

}
.tag-select {
  background-color: #409EFF; /* 或者你喜欢的任何颜色 */
  color: #ffffff; /* 文字颜色，确保与背景对比度高 */
}

.el-tree{
  color: #222;
  --el-tree-node-hover-bg-color: #d7f3ee;
  font-weight: 500;
}

</style>

















